<template>
  <div class="page-view">
    <div
      id="amapContainer"
      class="map"
    />
    <dl
      ref="info"
      class="info"
    >
      <dt class="name">
        {{ instInfo.TrainingName }}
      </dt>
      <dd class="item">
        电话 : {{ instInfo.ContactPhone }}
      </dd>
      <dd class="item">
        地址 : {{ instInfo.InstitutionAddress }}
      </dd>
    </dl>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapState } from 'vuex'
import { loadScript } from '@/lib/utils'
export default Vue.extend({
  data () {
    return {
      infoWindow: null as any,
      marker: null as any,
      position: [] as any,
    }
  },
  computed: mapState(['instInfo']),
  created () {
    // this.position = [this.instInfo.Lat || 120.414436, this.instInfo.Lon || 36.176927]
    this.position = [this.instInfo.Lng, this.instInfo.Lat]
    this.loadMap().then(this.initMap)
  },
  methods: {
    loadMap () {
      return loadScript('https://webapi.amap.com/maps?v=1.4.12&key=6862ebdee29c8a32e861cf8b6c242530&callback=onAMapLoad', 'amap', 'onAMapLoad')
    },
    initMap () {
      let map = new AMap.Map('amapContainer', {
        center: this.position,
        zoom: 17,
        resizeEnable: true,
      })
      const marker = this.addMarker(map)
      this.openInfoWindow(map)
      this.showInfoWindow(map, marker)
    },
    addMarker (map: any) {
      const marker = new AMap.Marker({
        // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.position,
        // offset: new AMap.Pixel(-13, -30),
      })
      marker.setMap(map)

      marker.on('click', () => {
        this.showInfoWindow(map, marker)
      })
      return marker
    },
    // 在指定位置打开信息窗体
    openInfoWindow (map: any) {
      const html = (this.$refs.info as HTMLDivElement).innerHTML

      this.infoWindow = new AMap.InfoWindow({
        content: html, // 使用默认信息窗体框样式，显示信息内容
        offset: new AMap.Pixel(0, -25),
      })

      // this.infoWindow.open(map, map.getCenter())
      // this.showInfoWindow(map)
    },
    showInfoWindow (map: any, marker: any) {
      this.infoWindow.open(map, marker.getPosition())
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  height: 100%;
}
.map {
  height: 100%;
  /deep/ {
    .amap-logo img {
      vertical-align: top!important;
    }
  }
}
.info {
  display: none;
}
.name {
  font-size: 30px;
  margin-bottom: 20px;
  color: #333;
}
.item {
  color: #666;
  font-size: 24px;
  line-height: 1.5;
  + .item {
    margin-top: 10px;
  }
}
</style>
